<!--  -->
<template>
  <div class="splityh-container">
    <el-dialog
      title="线段拆分"
      :visible.sync="dialogVisible"
      width="800px"
      top="100px"
      :before-close="handleClose"
      class="xdcfDialogClass"
      :close-on-click-modal="false"
    >
      <div style="text-align: center">
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="value"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :render-content="renderFunc"
          :titles="['Source', 'Target']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}',
          }"
          @change="handleChange"
          :data="data"
        >
          <el-button class="transfer-footer" slot="left-footer" size="small"
            >操作</el-button
          >
          <el-button class="transfer-footer" slot="right-footer" size="small"
            >操作</el-button
          >
        </el-transfer>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    splitYhdata: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      dialogVisible: false,
      data: generateData(),
      value: [1],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
    };
  },

  components: {},

  computed: {},

  watch: {
    splitYhdata(newVal, oldVal) {
      console.log("newVal", newVal);
      if (newVal) {
        this.dialogVisible = newVal.dialogVisible;
      }
    },
  },

  created() {},

  mounted() {},

  beforeUpdate() {
    //解决列配置引发的滚动条问题
  },

  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang='scss' scoped>
.splityh-container {
  width: 100%;
  height: 100%;
}
</style>